<template>
  <el-card class="box-card">
    <template #header>
      <div class="log-header">
        <div class="log-actions">
          <el-input
            v-model="searchText"
            placeholder="搜索日志"
            clearable
            size="small"
            style="width: 150px; margin-right: 10px"
          />
          <el-select
            v-model="logType"
            placeholder="日志类型"
            size="small"
            style="width: 120px; margin-right: 10px"
          >
            <el-option label="全部" value="all" />
            <el-option label="API" value="API" />
            <el-option label="系统" value="系统" />
            <el-option label="错误" value="错误" />
            <el-option label="主进程" value="主进程" />
          </el-select>
          <el-button type="text" @click="clearLogs">清空</el-button>
        </div>
      </div>
    </template>
    <div class="log-content">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in filteredLogs"
          :key="index"
          :timestamp="activity.timestamp"
          :type="getLogType(activity.content)"
          size="small"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from "vue";
import { useLogStore } from "../store/logStore";

const logStore = useLogStore();
const searchText = ref("");
const logType = ref("all");

// 根据日志内容确定日志类型
const getLogType = (content) => {
  if (
    content.includes("错误") ||
    content.includes("失败") ||
    content.includes("error")
  ) {
    return "danger";
  } else if (content.includes("API")) {
    return "primary";
  } else if (content.includes("主进程")) {
    return "warning";
  } else {
    return "info";
  }
};

// 过滤日志
const filteredLogs = computed(() => {
  return logStore.messages.filter((log) => {
    // 搜索文本过滤
    const textMatch =
      !searchText.value ||
      log.content.toLowerCase().includes(searchText.value.toLowerCase());

    // 日志类型过滤
    let typeMatch = true;
    if (logType.value !== "all") {
      typeMatch = log.content.includes(logType.value);
    }

    return textMatch && typeMatch;
  });
});

// 清空日志
const clearLogs = () => {
  logStore.clearMessages();
};
</script>

<style scoped>
.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-actions {
  display: flex;
  align-items: center;
}

.log-content {
  height: 450px;
  overflow-y: auto;
  padding-right: 10px;
}

/* 自定义滚动条样式 */
.log-content::-webkit-scrollbar {
  width: 6px;
}

.log-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.log-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 调整时间线项目的样式 */
:deep(.el-timeline-item__wrapper) {
  padding-bottom: 12px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
}

:deep(.el-timeline-item__content) {
  font-size: 13px;
  word-break: break-all;
}
</style>
